npm<template>
  <div id="outside">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <LogoHeader />
        </div>
      </el-col>
    </el-row>
    <div id="outside_main">
      <div v-if="this.ma_type == 1">
        <h1>课内资料</h1>
      </div>
      <div v-else>
        <h1>课外读物</h1>
      </div>

      <div v-if="materials[0]">
        <ul>
          <li v-for="(material, index) in materials" :key="index">
            <el-row>
              <el-col :span="4">
                <div class="num">
                  {{ index++ }}
                </div>
              </el-col>
              <el-col :span="17">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="material.ma_name"
                  placement="top"
                >
                  <div class="name">{{ material.ma_name }}</div>
                </el-tooltip>
              </el-col>
              <el-col :span="3">
                <div class="open" @click="dow(material.ma_name)">
                  <el-link
                    :underline="false"
                    :href="fileUrl"
                    :download="filename"
                    target="_blank"
                  >
                    <el-button type="primary">下载</el-button>
                  </el-link>
                </div>
              </el-col>
            </el-row>
          </li>
        </ul>
      </div>
      <div v-else>
        <el-empty description="教师还未上传资料！"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import LogoHeader from "../components/logo.vue";
export default {
  name: "",
  components: {
    LogoHeader,
  },
  data() {
    return {
      msg: "",
      index: 0,
      pages: {
        page: 1,
        size: 10,
        total: 100,
      },
      materials: [],
      filename: "",
      fileUrl: "",
    };
  },
  methods: {
    loadhHomeworkDetailData() {
      this.axios
        .get(
          "http://10.197.43.62:8088/teacher/material?ma_type=" +
            this.ma_type +
            "&co_id=" +
            this.co_id +
            "&st_id=" +
            this.st_id
        )
        .then((res) => {
          console.log(res.data);
          this.materials = res.data;
        });
    },
    dow(ma_name) {
      this.filename = ma_name;
      this.fileUrl =
        "http://10.197.43.62:8088/file/downloadziliao?fileName=" +
        this.filename;
      console.log(this.fileUrl);
    },
  },
  mounted() {
    this.loadhHomeworkDetailData();
  },
  computed: {
    ma_type() {
      return this.$store.state.ma_type;
    },
    co_id() {
      return this.$store.state.co_id;
    },
    st_id() {
      return this.$store.state.st_id;
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}

#outside {
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  min-height: 100vh;
  position: absolute;
}

#outside_main {
  margin: 100px 300px;
  background-color: #ecf5ff8f;
  padding: 10px;
}

h1 {
  font-size: 40px;
  text-align: center;
}

ul {
  margin-top: 40px;
}

.num {
  width: 35px;
  height: 35px;
  border: 1px solid #000;
  border-radius: 5px;
  text-align: center;
  margin: 0 auto;
}

.name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style>
#outside_main .el-row {
  margin: 10px;
}

#outside_main .el-col {
  height: 60px;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 30px;
}
</style>